import React, { useState, useEffect } from "react";
import { Checkbox } from "react-vant";
import "./Address.css";
import { LeftOutline } from "antd-mobile-icons";
import { SwipeAction, NavBar, Card, Button } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import axios from "axios";

export default function Address() {
  const navigate = useNavigate();
  let [address, setAddress] = useState([]);
  let getaddress = async () => {
    let res = await axios.get("/linmr/address");
    setAddress(res.data.data);
    console.log(res.data.data);
  };
  useEffect(() => {
    getaddress();
  }, []);
  return (
    <div style={{ backgroundColor: "rgb(244, 248, 255)", height: "100vh" }}>
      <div className="pj">
        <NavBar
          onBack={() => {
            navigate(-1);
          }}
        >
          我的地址
        </NavBar>
      </div>

      {address.map((i) => (
        <SwipeAction
          key={i._id}
          rightActions={[
            {
              key: "delete",
              text: "删除",
              color: "red",
              onClick: () => {
                axios.delete(`/linmr/deladdress/?_id=${i._id}`).then(() => {
                  getaddress();
                });
              },
            },
          ]}
        >
          <div className="card">
            <Card style={{ marginBottom: "10px" }}>
              <div className="ads">
                <div className="left">
                  <Checkbox checked={i.isdefault} />
                </div>
                <div className="right">
                  <p>{i.address}</p>
                  <p>
                    {i.name} {i.phone}
                  </p>
                </div>
              </div>
            </Card>
          </div>
        </SwipeAction>
      ))}

      <Button
        onClick={() => {
          navigate("/addaddress");
        }}
        className="btn1"
      >
        添加新地址
      </Button>
    </div>
  );
}
